<!--
* @FileDescription: 开关量模拟量比较页面
* @Author: yuec621@outlook.com
* @Date: 2024-11-30 12:42:00
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:42:00
-->
<template>
    <div class="pagestyle">
        <noDataChartCom v-if="state.nodataShow" @toolChange="toolChange" :searListData="state.searList"
            :tabList="state.configTabList" :lineConParams="state.lineConParams" @radioChange="radioChange"
            :attrObj="state.attrObj" :noconnected="true">
        </noDataChartCom>
        <div v-else>
            <div class="cardBox"
                :style="{backgroundColor:state.attrObj&&state.attrObj.chartBg?state.attrObj.chartBg:'#fff'}">
                <toolCom @toolChange="toolChange" :showToolList="state.showToolList"
                    :lineConParams="state.lineConParams" :searList="state.searList" :tabList="state.configTabList"
                    :totaltoolList="state.totaltoolList" :chartType="1" :timeRange="state.timeRangevalue"
                    :lengedList="state.lengedList" @radioChange="radioChange" :acSearchList="state.acSearchList"
                    :attrObj="state.attrObj" :noconnected="true">
                    <template v-slot:toolComTitle>
                        曲线配置
                    </template>
                </toolCom>
                <div v-loading="state.loading">
                    <compareChartCom :nameListstatus="state.nameListstatus" :statusList="state.statusList"
                        :chartList="state.chartList" :attrObj="state.attrObj" :splitNumber="state.splitNumber"
                        :symbolShow="state.symbolShow" :toolType="state.toolType" @toolChange="toolChange"
                        :maxMinScale="state.maxMinScale">
                    </compareChartCom>
                </div>
            </div>
            <div class="cardBox">
                <el-row :gutter="23">
                    <el-col :span="12">
                        <chartTable :curdShow="true" :tableheadsValue="state.tableheadsValue"
                            :tabledata="state.tabledata" :listSS="state.listSS">
                            <template v-slot:tabBoxList="row">
                                <span class="hover" v-for="item in state.tabList" :class="item.type==state.type?'bg':''"
                                    @click="tabClick(item)">
                                    {{ item.name }}({{ item.num }})</span>
                            </template>
                            <template v-slot:listSS="{row,field}">
                                <span v-if="field=='alarmStartValue'"
                                    style="color: rgba(255, 85, 85, 1);font-size: 16px;font-weight: 700;">
                                    {{row.alarmStartValue}}
                                </span>
                                <span v-if="field=='cutStartValue'"
                                    style="color: rgba(255, 85, 85, 1);font-size: 16px;font-weight: 700;">
                                    {{row.cutStartValue}}
                                </span>
                            </template>
                            <template v-slot:opraCurdBtn="row">
                                <el-button type="text" @click="lookLineClick(row.row)">查看曲线</el-button>
                            </template>
                        </chartTable>
                    </el-col>
                    <el-col :span="12">
                        <chartTable :curdShow="false" :tableheadsValue="state.tableheadsValuetwo"
                            :tabledata="state.tabledatatwo" :listSS="state.listSS" :pageconfig="state.pageconfig" @pagechangeSize="pagechangeSize"
                            @pagechange="pagechange">
                            <template v-slot:tabBoxList="row">
                                <p style="margin: 0;" v-if="state.tabListtwo.length>0">
                                    <span class="hover" v-for="item in state.tabListtwo"
                                        :class="item.pointId==state.typetwo?'bg':''"
                                        @click="tabClicktwo(item)">{{ item.pointId }}
                                        {{ item.sensorName }}({{ item.openCount }})</span>
                                </p>
                                <span v-else>列表</span>
                            </template>
                            <template v-slot:listSS="{row,field}">
                                <span v-if="field=='pointValueStr'">
                                    <el-tag
                                        :type="row.pointValueStr.includes('无')||row.pointValueStr.includes('停')?'warning':'success'">
                                        {{row.pointValueStr}}</el-tag>
                                </span>
                            </template>
                        </chartTable>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script setup>
    import toolCom from "./chartCom/toolCom.vue";
    import compareChartCom from "./chartCom/compareChartComnew.vue"
    import chartTable from "./chartCom/chartTable.vue";
    import noDataChartCom from "./chartCom/noDataChartCom.vue";
    import {
        computed,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    let state = reactive({
        loading:false,
        nodataShow: false,
        timeRange: [],
        chartList: {},
        symbolShow: false,
        chartLength: 0,
        alarmList: {},
        showToolList: false, //查看曲线展示前一条后一条
        splitNumber: 10,
        // 模拟量
        tabledata: [],
        tableheadsValue: computed(() => table_headers.hisAlarmLineTable),
        tabList: [{
            type: 0,
            name: '报警',
            num: 0,
            tableheads: computed(() => table_headers.hisAlarmLineTable),
            dataUrl: '/pointData/hisAlarmTable',
            tableData: []
        }, {
            type: 1,
            name: '断电',
            num: 0,
            tableheads: computed(() => table_headers.hisCutLineTable),
            dataUrl: '/pointData/hisCutTable',
            tableData: []
        }, {
            type: 2,
            name: '馈电',
            num: 0,
            tableheads: computed(() => table_headers.hisFeedLineTable),
            dataUrl: '/pointData/hisFeedTable',
            tableData: []
        }],
        type: 0,
        // 开关量
        tabledatatwo: [],
        tableheadsValuetwo: computed(() => table_headers.hisSwitchStateTable),
        tabListtwo: [],
        typetwo: 0,
        lineConParams: {
            type: 'A',
            pointUrl: "/simulate/history/attainPoints", //获取测点列表
            addTemSave: '/simulate/template/add', //新增模板接口
            tempList: '/simulate/template/list', //模板列表接口
            delTemp: '/simulate/template/del', //删除模板接口
            hisSearchSave: '/simulate/history/add', //新增历史查询接口
            hisSearchList: '/simulate/history/list', //查询历史查询接口
            hisSearchDel: '/simulate/history/del', //删除历史查询接口
            gethisAlarmScale: '/pointData/hisAlarmScale', //报警范围
            gethisCutScale: '/pointData/hisCutScale', //断电范围
            gethisFeedScale: '/pointData/hisFeedScale', //馈电范围
        },
        configTabList: [{
            type: 1,
            name: '测点选择'
        }, {
            type: 2,
            name: '曲线属性'
        }],
        pointIdList: [],
        searList: [{
            label: '时间范围',
            id: 'time',
            descList: [{
                label: '时间范围',
                type: 'timeRangepage',
                col: 24,
                bindData: undefined,
                field: 'timeRange'
            }]
        }, {
            label: '测点信息',
            id: 'pointLocal',
            descList: [{
                label: "传感器类型",
                type: "radio",
                col: 24,
                bindData: 'A',
                iSdefault: true,
                field: "type",
                judcond: 'deviceType', //判断条件
                options: [{
                        label: "模拟量",
                        value: 'A',
                    },
                    {
                        label: "开关量",
                        value: 'D',
                    }
                ],
            }, {
                label: '测点精度',
                type: 'radio',
                col: 24,
                bindData: false,
                judcond: 'jingdu', //判断条件
                options: [{
                    label: '自适应',
                    value: false
                }, {
                    label: '量程',
                    value: true
                }],
                field: undefined,
            }, {
                label: "传感器名称",
                type: "select",
                col: 24,
                bindData: undefined,
                options: [],
                judcond: 'sensorchoiceName', //判断条件
                field: 'choiceName',
                fieldT: 'sensorName'
            }]
        }, {
            label: "地点区域",
            id: "area",
            descList: [{
                    label: "所在区域",
                    type: "cascadercheckStrictly",
                    col: 24,
                    bindData: undefined,
                    options: [],
                    field: 'areaId',
                    fieldT: 'areaName',
                    judcond: 'areaName', //判断条件
                    props: {
                        children: "childList",
                        value: "id",
                        label: "areaName",
                        checkStrictly: true,
                        emitPath: false,
                    },
                },
                {
                    label: "安装地点",
                    type: "select",
                    col: 24,
                    bindData: undefined,
                    options: [],
                    field: "placeName",
                    judcond: 'placeName', //判断条件
                },
            ],
        }, ],
        statusList: {},
        nameListstatus: [],
        nameListstatusList: [],
        totaltoolList: [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true
        }],
        attrList: [],
        attrObj: undefined,
        listSS: [{
            field: "alarmStartValue"
        }, {
            field: "cutStartValue"
        }, {
            field: "pointValueStr"
        }],
        timeRangevalue: [],
        lengedList: [],
        toolType: null,
        /* 量程和自适应相关参数 */
        selfAdaption: false,
        maxMinScale: {
            upperRestriction: undefined,
            lowerRestriction: undefined
        },
        acSearchList: [], //默认页面筛选条件选择
        pageconfig: {
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
    })
    // 传感器精度
    function radioChange(val, data) {
        if (data.judcond == 'jingdu') {
            state.selfAdaption = val
        }
    }
    // 获取曲线图数据
    function getList(startTime, endTime) {
        state.loading=true
        axios.post('/pointData/simulateLine', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.hisSimulateLines.length > 0) {
                res.data.hisSimulateLines.forEach(item => {
                    state.attrList.forEach(itemsub => {
                        if (item.pointId == itemsub.pointId) {
                            item.attrObj = itemsub
                        }
                    })
                })
            }
            state.chartList = res.data
            state.loading=false
        })
    }
    // 获取状态图数据
    function getstatusList(startTime, endTime) {
        axios.post('/pointData/switchStateLine', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.switchPointLines && res.data.switchPointLines.length > 0) {
                res.data.switchPointLines.forEach(item => {
                    state.lengedList.forEach((itemsub) => {
                        if (item.pointId == itemsub.pointId) {
                            item.lengedList = itemsub.curlSwitchNodes;
                        }
                    });
                })
            }
            state.statusList = res.data
        })
    }
    // 头部操作工具栏事件
    async function toolChange(val) {
        state.toolType = val.type
        if (val.type == 'dateType') {
            if (val.data && val.data.length > 0) {
                let startTime = dayjs(val.data[0]).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(val.data[1]).format('YYYY-MM-DD HH:mm:ss')
                state.timeRangevalue = [startTime, endTime]
                if (state.pointIdList.length > 0) {
                    localStorage.setItem('compareChart', JSON.stringify({
                        pointIds: state.pointIdList,
                        startTime: startTime,
                        endTime: endTime,
                        lengedList: state.lengedList,
                        attrObj:state.attrObj
                    }))
                    await getList(startTime, endTime)
                    await getstatusList(startTime, endTime)
                    await tableList(startTime, endTime)
                    await getTableList(startTime, endTime)
                    if (state.selfAdaption) {
                        await getMaxMinScale()
                    }
                    if (val.brushValue) {
                        state.toolType = val.brushValue
                    }
                } else {
                    proxy.$modal.msgWarning('请选择所要查询的测点编号!');
                }
            } else {
                proxy.$modal.msgWarning('请选择所要查询时间范围!');
            }
        } else if (val.type == '4') {
            state.symbolShow = val.data
        } else if (val.type == '5') {
            state.toolType = val.data
        } else if (val.type == '6') {
            state.toolType = val.data
        } else if (val.type == '7') {
            state.toolType = val.data
        } else if (val.type == '8') {
            state.chartLength = state.chartList.length
            state.chartList[0].hisSimulateLines.forEach((item, index) => {

            })
        } else if (val.type == '10') {
            state.splitNumber -= 1
            if (state.splitNumber < 1) {
                state.splitNumber -= 0.1
                if (state.splitNumber < 0.1) {
                    state.splitNumber = 10
                }
            }
        } else if (val.type == '12') {
            state.toolType = val.type
        } else if (val.type == 'legend') {
            console.log(val.data,'val.dataval.data');
            
            let arr = []
            state.attrObj = val.attrObj
            state.attrList = val.data
            state.lengedList = val.data
            state.nameListstatusList = val.data
            state.pointIdList = val.data.map(item => {
                if (item.curlSwitchNodes) {
                    arr.push(...item.curlSwitchNodes)
                }
                return item.pointId
            })
            state.nameListstatus = arr
        } else if (val.type == 'checkedlegend') {
            if (val.data.valueType) {
                for (var i = 0; i < state.chartList.hisSimulateLines.length; i++) {
                    state.chartList.hisSimulateLines[i].maxShow = true
                    val.data.data.forEach(itemmax => {
                        if (itemmax.type == 'max') {
                            state.chartList.hisSimulateLines[i].opacitymax = itemmax.valueType ? 0.2 : 1
                        }
                        if (itemmax.type == 'min') {
                            state.chartList.hisSimulateLines[i].opacitymin = itemmax.valueType ? 0.2 : 1
                        }
                        if (itemmax.type == 'avg') {
                            state.chartList.hisSimulateLines[i].opacityavg = itemmax.valueType ? 0.2 : 1
                        }
                    })
                }
            } else {
                var valList = val.data.map(item => {
                    return item.pointId
                });
                for (var i = 0; i < state.chartList.hisSimulateLines.length; i++) {
                    //不存在则返回-1
                    if (valList.indexOf(state.chartList.hisSimulateLines[i].pointId) === -1) {
                        state.chartList.hisSimulateLines[i].maxShow = false
                        state.chartList.hisSimulateLines[i].opacity = 0.2
                    } else {
                        state.chartList.hisSimulateLines[i].maxShow = false
                        state.chartList.hisSimulateLines[i].opacity = 1
                    }
                }
            }
        } else if (val.type == 'legendshow') {
            state.lengedList = val.data
            state.attrObj = val.attrObj
            state.attrList = val.data
            state.acSearchList = val.acSearchList
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
            state.nodataShow = false
        } else if (val.type == '13') {
            state.toolType = val.type
        }
    }
    // 查看曲线按钮
    function lookLineClick(row) {
        if (state.type == 0) {
            router.push({
                path: '/qx/qx_alarmChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.alarmStartTime,
                    endTime: row.alarmEndTime
                }
            })
        } else if (state.type == 1) {
            router.push({
                path: '/qx/qx_cutChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.cutStartTime,
                    endTime: row.cutEndTime
                }
            })
        } else {
            router.push({
                path: '/qx/qx_kuidianChart',
                query: {
                    pointIds: row.pointId,
                    startTime: row.feedStartTime,
                    endTime: row.feedEndTime
                }
            })
        }
        state.showToolList = true
    }
    // 获取表格数据
    function tableList(startTime, endTime) {
        let data = {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime
        }
        state.tabList.forEach((item, index) => {
            axios.post(item.dataUrl, data).then(res => {
                if (index == 0) {
                    state.tabledata = res.data.list
                }
                item.tableData = res.data.list
                item.num = res.data.list.length
            })
        })
        state.tabledata = state.tabList[0].tableData
    }
    // 获取纵坐标最大最小范围接口
    function getMaxMinScale() {
        let data = {
            pointIds: state.pointIdList,
            queryStartTime: state.timeRangevalue[0],
            queryEndTime: state.timeRangevalue[1],
            selfAdaption: state.selfAdaption
        }
        axios.post(state.type == 0 ? state.lineConParams.gethisAlarmScale : state.type == 1 ? state.lineConParams
            .gethisCutScale : state.lineConParams.gethisFeedScale, data).then(res => {
            state.maxMinScale = res.data
        })
    }
    // 列表tab切换
    function tabClick(item) {
        state.tabledata = item.tableData
        state.type = item.type
        if (state.selfAdaption) {
            getMaxMinScale()
        }
        if (item.type == 0) {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisAlarmLineTable)
            }, 300)
        } else if (item.type == 1) {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisCutLineTable)
            }, 300)
        } else {
            setTimeout(() => {
                state.tableheadsValue = computed(() => table_headers.hisFeedLineTable)
            }, 300)
        }
    }
    // 获取模拟量表格数据
    function getTableList(startTime, endTime) {
        axios.post('/pointData/hisSwitchLineTable', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if (res.data.length > 0) {
                state.typetwo = res.data[0].pointId
                // state.tabledatatwo = res.data[0].hisSwitchStateTableDetails
                state.tabListtwo = res.data
                getTableListdetail()
            }
        })
    }
    
    function getTableListdetail(startTime, endTime) {
        axios.post('/pointData/hisSwitchLineTableDetail', {
            pointId: state.typetwo,
            queryStartTime: state.timeRangevalue[0],
            queryEndTime: state.timeRangevalue[1],
            pageSize: state.pageconfig.pageSize,
            pageNum: state.pageconfig.currentPage
        }).then(res => {
            if (res.data.list.length > 0) {
                state.pageconfig.total = res.data.total
                state.tabledatatwo = res.data.list
            }
        })
    }

    function pagechangeSize(val) {
        state.pageconfig.currentPage = 1
        state.pageconfig.pageSize = val
        getTableListdetail()
    }

    function pagechange(val) {
        getTableListdetail()
    }
    function tabClicktwo(item) {
        state.tabledatatwo = item.hisSwitchStateTableDetails
        state.typetwo = item.pointId
    }
    onMounted(() => {
        // localStorage.removeItem('compareChart')
        let hisChartStore = JSON.parse(localStorage.getItem('compareChart'))
        if (hisChartStore != null) {
            state.nodataShow = false
            state.pointIdList = hisChartStore.lengedList.map(item => {
                return item.pointId
            })
            state.lengedList = hisChartStore.lengedList
            if(hisChartStore.attrObj){
                state.attrObj=hisChartStore.attrObj
            }
            state.searList[0].descList[0].bindData = [hisChartStore.startTime, hisChartStore.endTime]
            state.timeRangevalue = [hisChartStore.startTime, hisChartStore.endTime]
            getList(hisChartStore.startTime, hisChartStore.endTime)
            getstatusList(hisChartStore.startTime, hisChartStore.endTime)
            tableList(hisChartStore.startTime, hisChartStore.endTime)
            getTableList(hisChartStore.startTime, hisChartStore.endTime)
            if (state.selfAdaption) {
                getMaxMinScale()
            }
        } else {
            state.nodataShow = true
        }
    })
</script>
<style lang="scss" scoped>
    .pagestyle {
        overflow-y: auto;

        .cardBox {
            padding: 10px;
            margin: 10px;
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba($color: #ffffff, $alpha: .6)
        }
    }
</style>